<extend name="template:common" />
<block name="css">
    <css href="__ZTREE__/css/zTreeStyle/zTreeStyle.css" />
    <style>
        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 220px;
            overflow-y: scroll;
            overflow-x: auto;
        }
    </style>
</block>
<block name="js">
        <script src="__ZTREE__/js/jquery.ztree.core.js"></script>
        <!--引入ztree复选框--> 
        <js href='__ZTREE__/js/jquery.ztree.excheck.min.js'/>
      <script type='text/javascript'>
        $(function(){
            $(':input[name=status]').val([{$row.status|default=1}]);
                
            //====================使用ztree展示一个权限列表================
            //准备配置选项数据
            var setting = {
                check:{enable:true,chkboxType:{ "Y" : "s", "N" : "s" },},
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey:'parent_id',//告知ztree父级分类标识不是pId而是parent_id
                    }
                },
                callback:{
                    onCheck:function(){
                        //获取所有的被选中的选项
                        var checked_nodes = ztree_obj.getCheckedNodes(true);
                        //清除所有的隐藏域的值
                        perms_node.empty();
                        //添加现在的
                        $(checked_nodes).each(function(){
                            var half_check = this.getCheckStatus();
                            //将半选状态的选项忽略
                            if(!half_check.half){
                                var html = '<input type="hidden" name="perm[]" value="' + this.id + '"/>';
                                $(html).appendTo(perms_node);
                            }
                        });
                    },
                },
            };

            var zNodes = {$permissions};
            var ztree_obj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            ztree_obj.expandAll(true);
            var perms_node = $('#perms');
            
            //编辑页面回显父级分类
            //1.根据父级节点的id找到ztree中对应的节点
            var parent_node = ztree_obj.getNodesByParam("id", {$row.parent_id|default=0});
            //2.选中此节点
            if(parent_node.length>0){
                parent_node = parent_node[0];
                ztree_obj.selectNode(parent_node);
                //找到父级分类的名字和id放到指定的表单控件中
                $('#parent_name').val(parent_node.name);
                $('#parent_id').val(parent_node.id);
            }
            //==================回显关联的菜单=============
            <notempty name="row">
            var perms = {$row.permission_ids};
            for(i in perms){
                var node = ztree_obj.getNodeByParam("id",perms[i]);
                ztree_obj.checkNode(node,true);
                var half_check = node.getCheckStatus();
                //将半选状态的选项忽略
                if(!half_check.half){
                    var html = '<input type="hidden" name="perm[]" value="' + perms[i] + '"/>';
                    $(html).appendTo(perms_node);
                }
            }
            </notempty>
    
    
    
        //------------------- 父级菜单ztree ---------------------
        //准备配置选项数据
        var setting = {
        data: {
            simpleData: {
                enable: true,
                pIdKey:'parent_id',//告知ztree父级分类标识不是pId而是parent_id
            }
        },
        callback:{
            onClick:function(event,tree_id,tree_node){
                    //获取点击节点的名字id,将名字放在input框中,将id放在隐藏域中
                    $('#parent_name').val(tree_node.name);
                    $('#parent_id').val(tree_node.id);
                },
            },
        };

        var zNodes = {$menus};
        
        $(function () {
            $(':input[name=status]').val([{$row.status | default = 1}]);
            var ztree_menu_obj = $.fn.zTree.init($("#parentMenu"), setting, zNodes);
            ztree_menu_obj.expandAll(true);
            
            //编辑页面回显父级分类
            //1.根据父级节点的id找到ztree中对应的节点
            var parent_node = ztree_menu_obj.getNodeByParam("id", {$row.parent_id|default=0});
            //2.选中此节点
            if(parent_node){
                ztree_menu_obj.selectNode(parent_node);
                //找到父级分类的名字和id放到指定的表单控件中
                $('#parent_name').val(parent_node.name);
                $('#parent_id').val(parent_node.id);
            }
            
        });
        });
    </script>
    <block name="main">
        <h1>
            <span class="action-span1"><a href="{:U('index')}">菜单管理</a></span>
            <span id="search_id" class="action-span1"> - {$meta_title} </span>
            <div style="clear:both"></div>
        </h1>
        <div class="main-div">
        <form method="post" action="{:U()}" enctype="multipart/form-data" >
            <table cellspacing="1" cellpadding="3" width="100%">
                <tr>
                    <td class="label">菜单名称</td>
                    <td>
                        <input type="text" name="name" maxlength="60" value="{$row.name}" />
                        <span class="require-field">*</span>
                    </td>
                </tr>
                <tr>
                    <td class="label">路径</td>
                    <td>
                        <input type="text" name="path" maxlength="60" value="{$row.path}" placeholder="如果是顶级菜单的可以不填"/>
                    </td>
                </tr>
                <tr>
                    <td class="label">父级菜单</td>
                    <td>
                        <input type="hidden" name="parent_id" id="parent_id"/>
                        <input type="text" disabled="disabled" id="parent_name" value="请选择"/>
                        <ul id="parentMenu" class="ztree"></ul>
                    </td>
                </tr>
                <tr>
                    <td class="label">权限</td>
                    <td>
                        <div id="perms"></div>
                        <ul id="treeDemo" class="ztree"></ul>
                    </td>
                </tr>
                <tr>
                    <td class="label">菜单描述</td>
                    <td>
                        <textarea  name="intro" cols="60" rows="4"  >{$row.intro}</textarea>
                    </td>
                </tr>
                <tr>
                    <td class="label">排序</td>
                    <td>
                        <input type="text" name="sort" maxlength="40" size="15" value="{$row.sort|default=50}" />
                    </td>
                </tr>
                <tr>
                    <td class="label">是否显示</td>
                    <td>
                        <input type="radio" name="status" value="1"/> 是
                        <input type="radio" name="status" value="0"  /> 否(当品牌下还没有商品的时候，首页及分类页的品牌区将不会显示该品牌。)
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><br />
                        <input type="hidden" name='id' value="{$row.id}" />
                        <input type="submit" class="button" value=" 确定 " />
                        <input type="reset" class="button" value=" 重置 " />
                    </td>
                </tr>
            </table>
        </form>
    </div>
    </block>
</block>
